<template>
  <div class="detaillease">
    <hunk-head name="租约详情"></hunk-head>
    <div class="detail-content">
      <div class="detail-top">
        <div class="room-name">{{ detailInfo.outtype == 1 ? '整租' : '合租' }}-{{ detailInfo.address }}</div>
        <div class="zuimg">
          <img :src="imgs[params.state - 1]" alt="" />
        </div>
        <div class="money">
          {{ detailInfo.rent }}元
          <span>/月</span>
        </div>
        <div class="room-info">
          <div class="info-one">
            <div class="con">{{ detailInfo.roomtype }}室</div>
            <div class="lz">户型</div>
          </div>
          <div class="shu"></div>
          <div class="info-one">
            <div class="con">{{ detailInfo.roomarea }}平米</div>
            <div class="lz">面积</div>
          </div>
          <div class="shu"></div>
          <div class="info-one">
            <div class="con">{{ detailInfo.renovation }}</div>
            <div class="lz">装修</div>
          </div>
        </div>
        <div class="dizhi">
          <div class="address-imag">
            <img v-if="baseUrl" :src="baseUrl + 'tenant/home/address.png'" alt="" />
          </div>
          <div class="address">
            {{ detailInfo.address }}
          </div>
        </div>
      </div>

    <div class="lianxi tenant-info">
      <div class="title">联系管家</div>
      <div class="roomy-itme" v-for="(item, index) in houseKeeperList" :key="index">
        <div class="item-left hk">
          <div class="roomy-head">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="info">
            <div class="housekeeper">
              <div>
                <div class="name">
                  <div class="name-tl">{{ item.unickname }}</div>
                </div>
                <div class="phone name">
                  <div>{{ item.telphone ? item.telphone : '' }}</div>
                </div>
              </div>
              <img @click="call(item.telphone)" src="./phone.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 租客信息 -->
    <div class="click-contract" v-if="detailInfo.econtractid" @click="bindViewContract">查看电子合同</div>
    <div class="click-contract" v-if="state==1 && params.jumpAdd !='jiaozu' && params.jumpAdd2 !='zuke'" style="background:red;font-weight:800;width:100%;position: fixed;bottom:0" @click="opentuizu">强制退租</div>
      <div class="lianxi tenant-info">
        <div class="title">租客信息</div>
        <div class="roomy-itme" v-for="(item, index) in detailInfo.tRoommateList" :key="index">
          <div class="item-left">
            <div class="roomy-head">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="info">
              <div class="name" v-if="item.type == 1">
                <div class="dd">租</div>
                <div class="maohao">客:</div>
                <div class="name-tl">{{ item.roommatename }}</div>
              </div>
              <div class="name" v-else>
                <div class="dd">室</div>
                <div class="maohao">友:</div>
                <div class="name-tl">{{ item.roommatename }}</div>
              </div>
              <div class="phone name">
                <div class="pho">手机号</div>
                <div class="maohao">:</div>
                <div>{{ item.telphone ? item.telphone : '' }}</div>
              </div>
              <div class="phone name">
                <div>身份证号</div>
                <div class="maohao">:</div>
                <div>{{ item.roommatecardid ? item.roommatecardid : '' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 租约信息 -->
      <div class="zuyue-info">
        <div class="title">租约信息</div>
        <div class="zuyue-content">
          <div class="list">
            <div class="qing">支付方式：</div>
            <div class="zhong">{{ detailInfo.orderinfo.realprice }}</div>
          </div>
          <div class="list">
            <div class="qing">租约开始时间：</div>
            <div class="zhong">{{ detailInfo.starttime }}</div>
          </div>
          <div class="list">
            <div class="qing">租约结束时间：</div>
            <div class="zhong">{{ detailInfo.endtime }}</div>
          </div>
          <div class="list">
            <div class="qing">当前授权结束时间：</div>
            <div class="zhong">{{ detailInfo.curauthorizetime }}</div>
          </div>
          
          <div class="list" v-if="detailInfo.dailyrent">
            <div class="qing">日付租金：</div>
            <div class="zhong">{{ detailInfo.dailyrent }}元/日</div>
          </div>
          <div class="list" v-if="detailInfo.weeklyrent">
            <div class="qing">周付租金：</div>
            <div class="zhong">{{ detailInfo.weeklyrent }}元/周</div>
          </div>
          <div class="list" v-if="detailInfo.monthlyrent">
            <div class="qing">月付租金：</div>
            <div class="zhong">{{ detailInfo.monthlyrent }}元/月</div>
          </div>
          <div class="list" v-if="detailInfo.quarterlyrent">
            <div class="qing">季付租金：</div>
            <div class="zhong">{{ detailInfo.quarterlyrent }}元/季</div>
          </div>
          <div class="list" v-if="detailInfo.rate">
            <div class="qing">管理费率：</div>
            <div class="zhong">{{ detailInfo.rate }}%</div>
          </div>
          <div class="list" v-if="detailInfo.electricityfees">
            <div class="qing">电费：</div>
            <div class="zhong">{{ detailInfo.electricityfees }}元/度</div>
          </div>
           <div class="list" v-if="detailInfo.paycycle">
            <div class="qing">支付周期：</div>
            <div class="zhong">{{ detailInfo.paycycle }}</div>
          </div>
           <div class="list" v-if="detailInfo.duration">
            <div class="qing">交租时长：</div>
            <div class="zhong">{{ detailInfo.duration }}</div>
          </div>
        </div>
      </div>
      <!-- 订单明细 -->
      <div v-if="params.jumpAdd" >
        <div class="fukuan-info">
          <div class="title">订单明细</div>
          <div class="fukuan-content">
            <div class="list">
              <div class="qing">租金：</div>
              <div class="zhong">{{ params.jump_rent }}</div>
            </div>
            <div class="list">
              <div class="qing">履约保证金：</div>
              <div class="zhong">{{ params.jump_mortgage }}</div>
            </div>
             <div class="list">
              <div class="qing">支付周期：</div>
              <div class="zhong">{{params.jump_orderText}}</div>
            </div>
             <div class="list">
              <div class="qing">{{params.jump_daylong}}：</div>
              <div class="zhong">{{params.jump_daylongValue}}</div>
            </div>
            <div class="list">
              <div class="qing">授权结束时间：</div>
              <div class="zhong">{{ params.jump_empowerendtime }}</div>
            </div>
            <div class="list" v-if="detailInfo.rate">
              <div class="qing">管理费率：</div>
              <div class="zhong">{{ params.jump_rate }}%</div>
            </div>
          </div>
           <div  class="heji">
              <div class="hj" style="text-algin: left">
                <div class="text" style="display: flex">合计：</div>
                <div>¥ {{ params.jump_payprice }}</div>
              </div>
               <div class="pay" @click="paymoney2" v-if="params.cycle == '5'">支付</div>
              <div class="pay" @click="paymoney" v-else>支付</div>
            </div>
        </div>
           
      </div>
      <!-- 付款记录 -->
      <div  v-if="!params.jumpAdd">
            <div class="fukuan-info" v-for="(item, index) in detailInfo.orderinfo" :key="index">
              <div class="title">付款记录</div>
              <div class="fukuan-content">
                <div class="list">
                  <div class="qing">订单编号：</div>
                  <div class="zhong">{{ item.orderno }}</div>
                </div>
                <div class="list">
                  <div class="qing">付款时间：</div>
                  <div class="zhong">{{ item.paytime }}</div>
                </div>
                <div class="list">
                  <div class="qing">授权开始时间：</div>
                  <div class="zhong">{{ item.empowertime }}</div>
                </div>
                <div class="list">
                  <div class="qing">授权结束时间：</div>
                  <div class="zhong">{{ item.empowerendtime }}</div>
                </div>
              </div>
              <div class="space"></div>
              <div class="qian-detail">
                <div class="qian-item">
                  <div>履约保证金</div>
                  <div class="ii">¥{{ item.deposit }}</div>
                </div>
                <div class="qian-item">
                  <div>租金</div>
                  <div class="ii">¥{{ item.rent }}</div>
                </div>
                <div class="qian-item">
                  <div>管理费</div>
                  <div class="ii">¥{{ item.servicecharge }}</div>
                </div>
              </div>
            <div class="space8"></div>
             <div  class="heji2 heji">
              <div class="hj" style="text-algin: left">
                <div class="text" style="display: flex">合计：</div>
                  <div>¥ {{ item.totalprice }}</div>
              </div>
            </div>
            </div>
             


      </div>
   

      <div class="zuyue-info" v-if="!params.jumpAdd&&detailInfo.tOrderPowers.length > 0">
        <div class="title">电费充值记录</div>
        <div class="zuyue-content" v-for="(i, index) in detailInfo.tOrderPowers" :key="index">
          <div class="list">
            <div class="qing">充值时间：</div>
            <div class="zhong">{{ i.createtime }}</div>
          </div>
          <div class="list">
            <div class="qing">充值金额：</div>
            <div class="zhong">¥{{i.totalprice }}</div>
          </div>
           <div class="space8"></div> 
              <div  class="heji2 heji">
              <div class="hj" style="text-algin: left">
                <div class="text" style="display: flex">合计：</div>
                <div>¥ {{ i.totalprice }}</div>
              </div>
            </div>
            <div style="width:100%;background:#f9f9f9;height:10px"></div>
        </div>
          
          <!-- <div v-if="params.jumpAdd" class="heji">
            <div class="hj" style="text-algin: left">
              <div class="text" style="display: flex">合计：</div>
              <div>¥ {{ item.realprice }}</div>
            </div>
            <div class="pay" @click="paymoney">支付</div>
          </div> -->
        </div>
      </div>
  <uni-popup ref="popuptuizu" type="center">
      <div class="tips">
        <div class="close" @click="closePopup">
          <img v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="tips-top">{{popupList.communityname}}</div>
        <div class="tishi">
          <img v-if="baseUrl" :src="baseUrl+'order/tips.png'" alt="">
          <div>退租后租客无法开门</div>
        </div>
        <div class="tips-text">
          <div class="text-item">
            <div class="left">房源月租：</div>
            <div class="right">
              {{detailInfo.rent}}
              <span>/月</span>
            </div>
          </div>
          <div class="text-item">
            <div class="left">租客姓名：</div>
            <div class="right">
              {{detailInfo.tRoommateList[0].roommatename}}
            </div>
          </div>
          <div class="text-item">
            <div class="left">租客身份证：</div>
            <div class="right">
             {{detailInfo.tRoommateList[0].roommatecardid}}
            </div>
          </div>
          <div class="text-item">
            <div class="left">原本的租约结束时间：</div>
            <div class="right red">
              {{detailInfo.endtime}}
            </div>
          </div>
        </div>
        <div class="tips-btn">
          <button :disabled="isdisabled" :class="[isdisabled?'':'green']" @click='tuizu'>
            {{times}}
            <span v-show="times !== '确认'">s</span>
          </button>
        </div>
      </div>
    </uni-popup>
    <!-- <div class="detail-btn">
      <div>退租</div>
      <div class="xuzu">续租</div>
    </div> -->
  </div>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
import Head from '@componentsMine/head'
const over = imgUrl + 'order/over.png'
const overed = imgUrl + 'order/overed.png'
const zuing = imgUrl + 'order/zuing.png'
import { getInfoV2 as getInfo, GethousekeeperListV2 } from '@/apis/tenant/leases'
import { CreatePowerOrder,createPayment,AddNoFlexibleNext ,AddFlexibleNext} from '@/apis/tenant/home'
import { debounce } from 'lodash'
import { getHouseContractOrder,forceRetreatRent } from '@/apis/order'
export default {
  components: {
    'hunk-head': Head
  },
   watch: {
    times(val,nel){
      if(val == 0){
        let that = this
        clearInterval(that.timer )
        this.timer = null
        this.times = '确认'
        this.isdisabled = false
        console.log('val=0 ',this.isdisabled,this.times )
      }else if(val != '确认'){
        console.log('val11 ',val,this.isdisabled,this.times)
        this.isdisabled = true
      }
    }
  },
  data() {
    return {
      state:'',
      times: 5,
      isdisabled: true,
      tenantuserid:'',
      imgs: [zuing, over, overed],
      houseKeeperList: [],
      detailInfo: {
        address: '',
        communityname: '',
        curauthorizetime: '',
        days: 0,
        endtime: '',
        orderinfo: [
          {
            deposit: 0,
            empowerendtime: '',
            empowertime: '',
            orderno: '',
            paytime: '',
            realprice: 0,
            rent: 0,
            servicecharge: 0,
            totalprice: 0
          }
        ],
        outtype: '',
        renovation: '',
        rent: 0,
        roomarea: '',
        roomtype: '',
        starttime: '',
        tRoommateList: [
          {
            avatar: '',
            roommatecardid: '',
            roommatename: '',
            telphone: ''
          }
        ]
      },
      params: null
    }
  },
  onLoad(e) {
    this.params = JSON.parse(e.query)
    console.log(333, this.params)
     setTimeout(()=>{
                   console.log(this.detailInfo)
              },3000)
  },
  computed: {
    userInfo(){
      return this.$store.state.baseStore.userInfo
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL
    },
    computedTotal() {
      if (this.detailInfo.tOrderPowers&&this.detailInfo.tOrderPowers.length > 0) {
        return this.detailInfo.tOrderPowers.reduce((a, b) => {
          return a + b.totalprice
        }, 0)
       
      }
      return 0
    }
    
  },
  created() {},
  mounted() {
    this.getInfo()
    setTimeout(()=>{
       console.log(this.detailInfo)
    },2000)
    // this.getHouseKeeper()
  },
  methods: {
      paymoney(){
       this.AddNoFlexibleNext()
    },
     paymoney2(){
       this.AddFlexibleNext()
    },
    opentuizu(){
      let that = this
      that.detailInfo.tRoommateList[0].roommatecardid=!that.detailInfo.tRoommateList[0].roommatecardid ? '' : that.detailInfo.tRoommateList[0].roommatecardid
      that.$refs.popuptuizu.open()
       this.changeTimes()
    },
     closePopup(){
      this.$refs.popuptuizu.close()
      clearInterval(this.timer)
      this.timer = null
      this.times = 5
    },
    changeTimes(){
      this.times = 5
      this.timer = setInterval(()=>{
        this.times--
      },1000)
    },
    tuizu(){
      const data = {
        // tenantuserid:uid,
        tenantuserid:this.tenantuserid,
        userid: this.$store.state.baseStore.userInfo.userid,
        wid:this.params.wid
      }
      
   
       forceRetreatRent(data).then(res=>{
        
        if(res.code == 200){
           
          // this.orderList = res.data
          console.log(res)
          uni.showToast({
            title: '退租成功',
            icon: 'none',
            success: ()=>{
              let that = this
              // that.listInfo.offset = 1
              that.$refs.popuptuizu.close()
              setTimeout(()=>{
                   uni.navigateBack({
                      delta:1,//返回层数，2则上上页
                    })
              },1000)
              // that.getHouseContractOrder()
            }
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
     
    },
    AddNoFlexibleNext(){
       console.log(this.params)
      const data = {
        contractid: this.params.wid,
        totalprice:this.params.jump_payprice,
        userid: this.$store.state.baseStore.userInfo.userid
      }
      AddNoFlexibleNext(data).then(res=>{
        if(res.code == 200){
         console.log(this.userInfo)
              const orderno = res.data.orderno
              const totalprice = res.data.payprice
              const title = '交租'
              const openid = wx.getStorageSync('openid')
             
            createPayment({
                goods_desc:"ceshi",
                goods_title:title,
                openid,
                orderno:orderno,
                payamt:totalprice
            }).then((res)=>{
                if(res.code == '500'){
                  uni.showToast({
                    title: res.msg,
                    icon: 'none'
                  })
                  return
                }
                console.log(this.params)
                const {timeStamp,nonceStr,package:pack,paySign,signType} =JSON.parse(res.data.expend.pay_info)
                wx.requestPayment(
                    {
                        timeStamp,
                        nonceStr,
                        package:pack,
                        signType,
                        paySign,
                        'success':function(res){
                            console.log(res)
                              uni.showToast({
                              title: res.msg,
                              icon: '支付成功'
                            })
                          uni.redirectTo({ url: '/pages/index/index' })
                        },
                        'fail':function(res){},
                        'complete':function(res){}
                    })
            })
           }else{
              uni.showToast({
            title: res.msg,
            icon: 'none'
          })
           }
        })
      console.log(data)
    },
    AddFlexibleNext(){ 
      console.log(this.params)
              const orderno = this.params.jump_orderno
              const totalprice = this.params.jump_payprice
              const title = '交租'
              const openid = wx.getStorageSync('openid')
             
            createPayment({
                goods_desc:"ceshi",
                goods_title:title,
                openid,
                orderno:orderno,
                payamt:totalprice
            }).then((res)=>{
                if(res.code == '500'){
                  uni.showToast({
                    title: res.msg,
                    icon: 'none'
                  })
                  return
                }
                console.log(this.params)
                const {timeStamp,nonceStr,package:pack,paySign,signType} =JSON.parse(res.data.expend.pay_info)
                wx.requestPayment(
                    {
                        timeStamp,
                        nonceStr,
                        package:pack,
                        signType,
                        paySign,
                        'success':function(res){
                            console.log(res)
                              uni.showToast({
                              title: res.msg,
                              icon: '支付成功'
                            })
                          uni.redirectTo({ url: '/pages/index/index' })
                        },
                        'fail':function(res){},
                        'complete':function(res){}
                    })
            })
    },
    call(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log('拨打电话成功')
        },
        fail() {
          console.log('打电话失败了')
        }
      })
    },
    // getHouseKeeper() {
    //   console.log('1313131131313')
    //   console.log(this.params)
    //   GethousekeeperListV2({
    //     Contractid: this.params.wid,
    //     house_room_id: this.params.houseid
    //   }).then((e) => {
    //     if (e.code === 200) {
    //       this.houseKeeperList = e.data
    //     }
    //   })
    // },
    bindViewContract: debounce(function () {
      uni.showLoading({
        title: '加载中...'
      })
      uni.downloadFile({
        url: this.detailInfo.fileurl,
        success: (res) => {
          var filePath = res.tempFilePath
          this.pdfPath = filePath
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: (res) => {
              uni.hideLoading()
              this.isRead = true
              console.log('打开文档成功')
            }
          })
        }
      })
    }, 1000),
  
    getInfo() {
      getInfo({ wid: this.params.wid }).then((res) => {
        console.log(res)
        this.state = res.data.state
        this.tenantuserid =res.data.tenantuserid
        console.log(this.state,this.tenantuserid)
        if (res.code == 200) {
          this.detailInfo = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          uni.navigateBack({ delta: 1 })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detaillease {
  width: 100vw;
  height: calc(100vh - 40px);
  box-sizing: border-box;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  .detail-content {
    flex: 1;
    overflow-y: auto;
  }
  .detail-top {
    background: #fff;
    padding: 20px 10px;
    padding-bottom: 0;
    .room-name {
      text-align: left;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 28px;
    }
    .zuimg {
      margin: 10px 0;
      img {
        width: 62px;
        height: 20px;
      }
    }
    .money {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ff5a65;
      line-height: 33px;
      span {
        font-size: 16px;
      }
    }
    .room-info {
      height: 57px;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .info-one {
        text-align: center;
        .con {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4a4a4a;
          line-height: 20px;
        }
        .lz {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          line-height: 17px;
        }
      }
      .shu {
        width: 1px;
        height: 25px;
        border: 1px solid #efefef;
      }
    }
    .dizhi {
      display: flex;
      align-items: center;
      padding: 8px 0 10px 0;
      .address-imag {
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .address {
        flex: 1;
        margin-left: 10px;
        // height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4a4a4a;
        line-height: 22px;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
  .lianxi {
    margin: 10px 0;
    background: #fff;
    .title {
      border-bottom: 1px solid #efefef;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 46px;
      padding-left: 15px;
    }
    .roomy-itme {
      margin-left: 15px;
      border-bottom: 1px solid #efefef;
      box-sizing: border-box;
      padding: 9px 0;
      padding-right: 17px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-left {
        display: flex;
      }
      .roomy-head {
        width: 45px;
        height: 45px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .roomy-info {
        margin-left: 10px;
        .name {
          margin-top: 5px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 16px;
          text-align: left;
        }
        .phone {
          margin-top: 4px;
          line-height: 14px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
        }
      }
    }
    .item-right {
      width: 20px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .roomy-itme:last-child {
      border: 0;
    }
  }
  .tenant-info {
    .info {
      margin-left: 10px;
      .name {
        display: flex;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 16px;
        color: #9b9b9b;
        .name-tl {
          color: #000000;
        }
        .dd {
          letter-spacing: 19px;
        }
        .pho {
          letter-spacing: 4px;
        }
        .maohao {
          letter-spacing: 4px;
        }
      }
    }
  }
  .zuyue-info {
    margin: 10px 0;
    background: #fff;
    .title {
      border-bottom: 1px solid #efefef;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 46px;
      padding-left: 15px;
    }
    .zuyue-content {
      padding: 15px 15px 5px 15px;
      .list {
        margin-bottom: 10px;
        display: flex;
        div {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 20px;
        }
        .qing {
          color: #9b9b9b;
        }
        .zhong {
          color: #4a4a4a;
        }
      }
    }
  }
  .fukuan-info {
    margin: 10px 0;
    background: #fff;
    .title {
      border-bottom: 1px solid #efefef;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 46px;
      padding-left: 15px;
    }
    .fukuan-content {
      padding: 15px 15px 5px 15px;
      .list {
        margin-bottom: 10px;
        display: flex;
        div {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 20px;
        }
        .qing {
          color: #9b9b9b;
        }
        .zhong {
          color: #4a4a4a;
        }
      }
    }
    .space {
      margin: 0 15px;
      height: 1px;
      border: 1px solid #efefef;
    }
    .qian-detail {
      padding: 15px 15px 0 15px;
      .qian-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        div {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          line-height: 20px;
        }
        .ii {
          color: #9b9b9b;
        }
      }
    }
  }
  .detail-btn {
    width: 100%;
    height: 50px;
    display: flex;
    div {
      width: 50%;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4a4a4a;
      line-height: 50px;
      text-align: center;
      background: #ffffff;
      backdrop-filter: blur(0px);
    }
    .xuzu {
      background: linear-gradient(315deg, #ffaa58 0%, #ffbd6c 100%);
      color: #ffffff;
    }
  }
}
.click-contract {
  width: 345px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  margin: 0 auto;
  background: linear-gradient(315deg, #ffaa58 0%, #ffbd6c 100%);
  margin-top: 10px;
  border-radius: 4px;
}
.hk {
  width: 100%;
  .info {
    width: 100%;
  }
}
.housekeeper {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .phone {
    margin-top: 6px;
  }
  img {
    width: 20px;
    height: 20px;
  }
}

.space8 {
  margin: 0 8px;
  height: 1px;
  border: 1px solid #efefef;
}
.heji.heji2{
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  padding-right: 15px;
  box-sizing: border-box;
}
.heji {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15px;
  .hj {
    padding: 10px 0;
    display: flex;
    align-items: center;
    div {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #f04945;
      line-height: 13px;
    }
    .text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4a4a4a;
      line-height: 20px;
    }
  }
  .pay {
    font-size: 30rpx;
    width: 20%;
    background: orange;
    color: #fff;
    height: 42px;
    text-align: center;
    line-height: 2.7;
    padding: 0;
  }
  .tips-top{
    padding: 0 34px;
    height: 60px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tishi{
    height: 37px;
    background: #FF6B75;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 37px;
    padding-left: 18px;
    display: flex;
    align-items: center;
    img{
      width: 16px;
      height: 16px;
      margin-right: 13px;
    }
  }
 .tips-text{
    box-sizing: border-box;
    padding-left: 15px;
    padding-top: 10px;
    .text-item{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 20px;
      display: flex;
      margin: 5px 0;
      .left{
        margin-right: 12px;
      }
      .right{
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4A4A4A;
        line-height: 20px;
        span{
          font-size: 10px;
          color: #9B9B9B;
        }
      }
      .red{
        color: #FF6B75;
      }
    }
  }
  .tips-btn{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      button{
        width: 305px;
        height: 45px;
        background: #CCCCCC;
        border-radius: 100px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 45px;
      }
      button::after{
        border: 0;
      }
      .green{
        background: #00CF64;
      }
    }
}
.tips{
    width: 335px;
    height: 304px;
    background: #FFFFFF;
  }
  .close{
    position: absolute;
    top: 22px;
    right: 13px;
    width: 18px;
    height: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .tips-top{
    padding: 0 34px;
    height: 60px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tishi{
    height: 37px;
    background: #FF6B75;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 37px;
    padding-left: 18px;
    display: flex;
    align-items: center;
    img{
      width: 16px;
      height: 16px;
      margin-right: 13px;
    }
  }
 .tips-text{
    box-sizing: border-box;
    padding-left: 15px;
    padding-top: 10px;
    .text-item{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 20px;
      display: flex;
      margin: 5px 0;
      .left{
        margin-right: 12px;
      }
      .right{
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4A4A4A;
        line-height: 20px;
        span{
          font-size: 10px;
          color: #9B9B9B;
        }
      }
      .red{
        color: #FF6B75;
      }
    }
  }
  .tips-btn{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      button{
        width: 305px;
        height: 45px;
        background: #CCCCCC;
        border-radius: 100px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 45px;
      }
      button::after{
        border: 0;
      }
      .green{
        background: #00CF64;
      }
    }
  .none{
    width: 100vw;
    margin-top: 50px;
    // background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img{
      width: 190px;
      height: 195px;
    }
  }

</style>
